<template>
<div class="completion-edit">
  <el-input v-model="title" placeholder="请输入题目内容" type="textarea" autosize @change="changeTitle"></el-input>
  <el-checkbox v-model="checked" class="isness" @change="changeNess">必答</el-checkbox>  
  <div class="grade">
    <span style="margin-right: 20px">分数:</span>
    <el-input-number v-model="grade" :step="1" :min="1" :max="100" step-strictly @change="changeGrade"></el-input-number>
    <el-tooltip content="答案解析" placement="top" effect="light">
      <el-button icon="el-icon-edit" style="margin-left: 20px" @click="dialogFormVisible = true; this.fresolution = this.resolution"></el-button>
    </el-tooltip> 
    <el-dialog title="答案解析" v-model="dialogFormVisible">  
      <el-input
        type="textarea"
        placeholder="请输入答案解析"
        v-model="fresolution"
      >
      </el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false; this.fresolution=this.resolution">取 消</el-button>
        <el-button type="primary" @click="changeResolution">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
  <el-input v-model="correctAnswer" placeholder="答案" type="textarea" autosize @change="changeAnswer" style="margin-top: 10px"></el-input>
  <el-button class="finish-edit" @click="finish">完成编辑</el-button>
</div>
  
</template>

<script>
import { h } from 'vue';
export default {
  name:'CompletionEdit',
  data(){
   return {
      dialogFormVisible: false,
      fresolution: '',
   }
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    checked: {
      type: Boolean,
      default: true,
    },
    grade: {
      type: Number,
      default: 5,
    },
    resolution: {
      type: String,
      default: ''
    },
    correctAnswer: {
      type: String,
      default: ''
    }
  },
  methods: {
    changeTitle() {
      this.$emit('changeTitle',this.title)
    },

    changeAnswer() {
      if(this.correctAnswer == '' || this.correctAnswer == null) {
        this.$notify({
          title: '警告',
          message: h('i', { style: 'color: teal'}, '正确答案不能为空')
        });
        return
      }
      this.$emit('changeAnswer',this.correctAnswer)
    },

    changeNess() {
      this.$emit('changeNess', this.checked)
    },

    finish() {
      this.$emit('finish')
    },

    changeGrade() {
      this.$emit('changeGrade', this.grade)
    },

    changeResolution() {
      this.dialogFormVisible = false
      // this.resolution = this.fresolution
      this.$emit('changeResolution', this.fresolution)
    },
  }
}
</script>

<style scoped src='assets/css/editcss/completionEdit.css'>
  /* @import url('../../css/completionEdit.css'); */
</style>
